<template>
    <div class="header" :style="styleObj">
        <router-link to="/users/center" tag="div" class="left avator" >
            <img :src="avator" alt="" v-if="avator != ''">
        </router-link>
        <div class="left back" v-if="back" @click="toBack">
            <i class="cubeic-back"></i>
        </div>
        <h1>{{title}}</h1>
        <div class="right icons" v-if="icons">
            <ul>
                <li @click="btnClick2SignIn"><i class="iconfont icon-qiandao"></i></li>
                <li @click="btnClick2Search"><i class="iconfont icon-search"></i></li>
                <li @click="btnClick2Edit"><i :class="[isEdit ? 'iconfont icon-edit' : 'cubeic-close']" style="font-size: 16px!important;"></i></li>
            </ul>
        </div>
        <div class="right search" v-if="search" @click="btnClick2Search">
            <i class="iconfont icon-search"></i>
        </div>
        <router-link tag="div" to="/" class="right home" v-if="home" >
            <i class="iconfont icon-shouye1"></i>
        </router-link>
        <div class="right collection" v-if="collection" @click="btnClick2Collection">
            <i class="iconfont" :class="[isCollection ? 'icon-shoucang' : 'icon-shoucang1']"></i>
        </div>
        <div class="search-box" @click="btnClick2Search" v-if="searchBox">
            <i class="iconfont icon-search"></i> 书名/作者/关键字
        </div>
        <div class="search-input" v-if="searchInput">
            <cube-input v-model="value" :autofocus="true" placeholder="书名/作者/关键字" @blur="onBlur"></cube-input>
        </div>
        <div  class="tab">
            <slot name="tab"></slot>
        </div>
        <div class="right" @click="btnClick2Rigth" v-if="rightText != ''">
            {{rightText}}
        </div>

    </div>
</template>

<script>
import {show} from 'utils/Base'
export default {
    name: 'Toolbar',
    props: {
        avator: {
            required: false,
            type: String,
            default: ''
        },
        back: {
            required: false,
            type: Boolean,
            default: false
        },
        title: {
            required: false,
            type: String,
            default: ""
        },
        rightText: {
            required: false,
            type: String,
            default: ""
        },
        icons: {
            required: false,
            type: Boolean,
            default: false
        },
        search: {
            required: false,
            type: Boolean,
            default: false
        },
        searchBox: {
            required: false,
            type: Boolean,
            default: false
        },
        searchInput: {
            required: false,
            type: Boolean,
            default: false
        },
        transparent: {
            required: false,
            type: Boolean,
            default: false
        },
        styleObj: {
            required: false,
            type: Object
        },
        collection: {
            required: false,
            type: Boolean,
            default: false
        },
        isCollection: {
            required: false,
            type: Boolean,
            default: false
        },
        isEdit: Boolean,
        home: Boolean
    },
    data () {
        return {
            value: ""
        }
    },
    methods: {
        toBack () {
            this.$router.back(-1);
        },
        btnClick2SignIn () {
            this.$router.push('/user/sign');
        },
        btnClick2Search () {
            this.$router.push('/search');
        },
        btnClick2Edit () {
            
            this.$emit("handleEditClick");
        },
        btnClick2Collection () {
            this.isCollection = !this.isCollection
            this.$emit("handleCollectClick", this.isCollection);
        },
        btnClick2Rigth () {
            this.$emit('handleRightTextClick', this.rightText);
        },
        onBlur () {
            this.$emit('handleInputTextChange', this.value);
        }
    },
    computed: {
        style () {
            return this.transparent ? {'backgroundColor': 'transparent!important'} : {};
        }
    }
}
</script>
<style lang="stylus" scoped>
@import '~assets/css/style.styl';
.header {
    .avator {
        width $toolbar-height
        height $toolbar-height
        img {
            width 70%
            height 70%
            border-radius 50%
        }
    }
    .icons {
        ul {
            margin-right 0!important
            li {
                display inline-block
                margin-right 15px 
            }
            :nth-child(3) {
                margin-right 0px
            }
        }
    }
    .search-box {
        background rgba(234, 234, 234, 0.76)
        position absolute
        left 20vw
        right 10vw
        top 7px
        bottom 7px
        border-radius 15px
        line-height 30px
        font-size 14px
        color #969696

        .iconfont {
            font-size 14px!important
        }
    }

    .search-input {
        position absolute
        left 10vw
        right 14vw
        top .5vw
        & >>> .cube-input_active::after,
        & >>> .cube-input::after {
            border-color rgba(255, 255, 255, 0)!important
        }
    }

    .tab {
        position absolute
        left 20vw
        right 20vw
        line-height 30px
    }

    .collection {
        .icon-shoucang {
            color $colorPrimary
        }
    }
}
</style>
